<template lang="html">
  <div id="index">
    <noticeTop></noticeTop>
    <div class="laohuji">
      <!-- 来首音乐 -->
      <div style="display:none" class="musicbox">
        <audio id="bgM" ref="music" src="./media/music.mp3" hidden="true"></audio>
      </div>
      <div class="roll">
        <img class="num num1" src="../assets/8.png" alt="" >
        <img class="num num2" src="../assets/8.png" alt="">
        <img class="num num3" src="../assets/8.png" alt="">
        <img class="num num4" src="../assets/8.png" alt="">
      </div>
      <div class="q" style="display: none" id="quchu">
        <img class="num num1" src=../assets/0.png" alt="" >
        <img class="num num2" src=../assets/1.png" alt="">
        <img class="num num3" src=../assets/2.png" alt="">
        <img class="num num4" src=../assets/3.png" alt="">
        <img class="num num1" src=../assets/4.png" alt="">
        <img class="num num2" src=../assets/5.png" alt="">
        <img class="num num3" src=../assets/6.png" alt="">
        <img class="num num3" src=../assets/7.png" alt="">
        <img class="num num4" src="../assets/8.png" alt="">
        <img class="num num4" src=../assets/9.png" alt="">
      </div>
      <div class="control">
        <img src="../assets/guize.png" alt="a" style="width: 1.36rem; height: 1rem">
        <div  id="start" class="start" ></div>
        <img src="../assets/shenyin.png" alt="a" style="width: 1.36rem;  height: 1rem">
      </div>
    </div>
    <div class="rluse">
      <div class="henxian"></div>
      <div class="rluse_bg">
        <div class="rlise-main">
          <h3>规则说明</h3>
          <ul class="rlise-wrap">

            <li>1.活动期间<label class="red">参与游戏</label>即可获得<label class="red">5000~8888元红包</label>,每人只能参与一次。</li>
            <li>2.<label class="red">邀请好友</label>参加游戏可额外<label class="red">送1000元</label>红包，<label class="red">最多可邀请10个好友</label>。</li>
            <li>3.红包领取成功后，自动存入您的鲸鱼账户。产生的<label class="red">收益可提现</label>，有效期一天。</li>
            <li>4.<label class="red">未注册用户</label>领取红包后，注册<label class="red">再送5000元</label>，而且首次投资活期，<label class="red">充多少送多少</label></li>
            <h5>注：活动最终解释权归鲸鱼所有</h5>
          </ul>
        </div>
      </div>
    </div>
    <follow ></follow>
    <popup :isWin="isWin" :total="total"></popup>

    <!--真二维码-->
    <img class="erweima-y" src="../assets/erweima.png" style="">
  </div>
</template>

<script>
  import noticeTop from './NoticeTop.vue'
  import follow from './Follow.vue'
  import popup from './Popup.vue'
  // 可以直接引入jquery,但没有全局的jQuery变量
  import $ from 'jquery'
  import wx from 'weixin-js-sdk'

  // 引入详情页
  export default {
    name: 'index',
    data () {
      return {
        stopcount : 4,
        count : 0,
        scount : 3,
        t:null,
        b:null,
        s:null,
        g:null,
        result:null,
        result1: null,
        total : 0,
        isWin: false,
        url: 'http://wthrcdn.etouch.cn/weather_mini?citykey=101010100',

      }
    },
    computed: {
    },
    created () {

      // 调用事件接收
      this.$root.eventHub.$on('isWarnFun', (val) => {
        this.$nextTick(() => {
          this.onGogo();
          this.total=null;
          this.isWin = val
        });
      });
    },

    mounted () {
      this.onGogo();
    },

    methods:{
      preLoadImg: function() {
        let img = new Image();
        img.src = url;
      },
      // 绑定事件
      onGogo: function () {
        $('#start').one('touchstart', () => {
          this.$refs.music.play()
          $("#start").removeClass('start').addClass('down');
        }).one('touchend',  () => {
          setTimeout(() => {
            $("#start").removeClass('down').addClass('start');
          }, 100);
          setTimeout(() => {
            this.$refs.music.pause();
          }, 3800);

          if (this.t == "undefinded" || this.t == null) {
            console.log(112)
            this.countT();
            this.bcountT();
            this.ccountT();
            this.zuicountT();
            this.dcountT();
          }
        });
      },

      // 生成指定位数的随机整数
      randomNum: function (n){
        var t='';
        for(var i=0;i<n;i++){
          t+=Math.floor(Math.random()*10);
        }
        return t;
      },
      // 生成指定范围内的随机整数
      randomNumRange: function (minNum,maxNum){
        switch(arguments.length){
          case 1:
            return parseInt(Math.random()*minNum+1);
            break;
          case 2:
            return parseInt(Math.random()*(maxNum-minNum+1)+minNum);
            break;
          default:
            return 0;
            break;
        }
      },
      ran: function () {
        /*result = Math.round(Math.random()*10);*/
        /*   0~10   */
        //Math.floor(n); 返回小于等于n的最大整数。
        let result = Math.floor(Math.random() * (9) + 1);
        console.log('----------------'+result)
        /*   0~9   */
        /*result = Math.ceil(Math.random()*10);*/
        /*   1~10   */
        return result;
      },
      ran1: function () {
        let result1 = Math.floor(Math.random() * (5) + 5);
        /* Math.random()*(max-min+1)+min */
        console.log('xxxxxxxxxxxxxx'+result1)
        return result1;
    },

      stop: function () {
        if (this.stopcount == -1) {
          this.stopcount = 4;
        }
        this.m = setTimeout(() =>{
            this.stopcount--;
          if  (this.stopcount == 4) {
            clearTimeout(this.g);
            let temp = this.randomNumRange(0, 8);
            $(".num").eq(4).attr("src","images/laohuji_new/"+temp+".png");
            this.total += temp;
            this.stop();

          }else if(this.stopcount == 3) {
            clearTimeout(this.z);
            let temp =  this.randomNumRange(0, 8);
            $(".num").eq(3).attr("src", "./images/" + temp + ".png");
            this.total += temp;
            this.stop();

          } else if ( this.stopcount == 2) {
            clearTimeout(this.s);
            let temp1 =  this.randomNumRange(0, 8);
            $(".num").eq(2).attr("src", "./images/" + temp1 + ".png");
            this.total += temp1 * 10;
            this.stop();
          } else if ( this.stopcount == 1) {
            clearTimeout(this.b);
            let temp2 =  this.randomNumRange(0, 8);
            $(".num").eq(1).attr("src", "./images/" + temp2 + ".png");
            this.total += temp2 * 100;
            this.stop();
          } else if ( this.stopcount == 0) {
            clearTimeout(this.t);
            this.t = null;
            let temp3 =  this.randomNumRange(5, 8);;
            $(".num").eq(0).attr("src", "./images/" + temp3 + ".png");
            this.total += temp3 * 1000;
            this.stop();
          } else {
            //var t,s,b,g = 0;
            clearTimeout(this.m);
            /*$(".hoverBg").show();*/
            //$("#start").removeAttr("disabled")
          }
        }, 500);
      },

      countT: function () {
        this.t = setTimeout( () => {
          this.t = 1;
          $(".num").eq(0).attr("src", "./images/" + this.count + ".png");
          this.count++;
          if (this.count == 10) {
            this.count = 0;
          }
          this.countT();
        }, 100);
      },
      bcountT: function () {
        this.b = setTimeout( () => {
          $(".num").eq(1).attr("src", "./images/" + this.count + ".png");
          this.count++;
          if (this.count == 10) {
            this.count = 0;
          }
          this.bcountT();
        }, 100);
      },
      ccountT: function () {
        this.s = setTimeout( () => {
        $(".num").eq(2).attr("src", "./images/" + this.count + ".png");
        this.count++;
        if (this.count == 10) {
          this.count = 0;
        }
        this.ccountT();
      }, 100);
      },
      zuicountT: function () {
        this.z = setTimeout( () => {
        $(".num").eq(3).attr("src", "./images/" + this.count + ".png");
          this.count++;
        if (this.count == 10) {
          this.count = 0;
        }
          this.zuicountT()
      }, 100);
      },
      dcountT: function () {
        this.g = setTimeout( () => {
        this.stop();
      }, 1000);
        this.x = setTimeout( () => {

          // 显示结果
          this.isWin = true;
//          this.$store.commit("isWarnFun");
      }, 3700);
      },



  },
    // 注册组件
    components: {
      noticeTop,
      follow,
      popup
    }

  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import '../common/style/base.styl'

#index
  position relative
  .laohuji
    position relative
    height rem(934)
    background url("../assets/top_bg.png") no-repeat left top
    background-size 100% 100%
    .roll
      padding rem(404) rem(100) 0
      margin-bottom rem(115)
      img
        width rem(100)
        height rem(190)
        padding rem(16) rem(16)
      img:nth-child(2)
        padding-left rem(20)
      img:nth-child(3)
        padding-left rem(21)
      img:nth-child(4)
        padding-right 0
    .control
      display -webkit-box
      display -webkit-flex
      display flex
      -webkit-justify-content space-around
      justify-content space-around
      align-items  flex-end
      text-align center
      padding 0 rem(60)
      img
        padding-bottom  rem(10)
        margin 0 rem(30)
      #start
        width 3.3rem
        height rem(170)
        overflow hidden
      .start
        background url("../assets/switchGo.png") no-repeat
        background-position center top
        background-size 100% rem(340)
      .down
        background url("../assets/switchGo.png") no-repeat
        background-position center -(rem(176))
        background-size 102% rem(346)
  .rluse
    height rem(546)
    width rem(712)
    padding-top rem(24)
    margin -2px auto rem(60)
    background #f5c519
    .henxian
      height rem(12)
      margin 0 rem(7) rem(12)
      border-radius rem(6)
      background-color #c45e00
    .rluse_bg
      width rem(670)
      margin 0 auto
      padding-bottom rem(14)
      background url("../assets/sawtooth.png") no-repeat center bottom
      background-size rem(670)
      .rlise-main
        background-color #ffe88e
        h3
          text-align center
          line-height rem(50)
          font-weight bold
          font-size rem(28)
          margin-bottom rem(16)
          background url("../assets/activity_rules.png") no-repeat center center
          background-size 90% rem(20)
          color #fd710d
        ul.rlise-wrap
          padding 0 rem(38)
          line-height rem(40)
          font-size 0.34rem
          color #c45e00
        .red
          color #cc0e28
        h5
          padding-top rem(24)
          line-height rem(62)
          text-align center
          font-size rem(28)
          color #dd9e4c

  .erweima-y
    position absolute;
    left 0
    bottom 0rem
    z-index 88
    width rem(430)
    border 2px red solid
    padding 3rem 0 3rem 3rem
    margin -3rem 0 3rem -3rem
    -webkit-user-select: none
    opacity 0
</style>
